<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/css/common.css">
    <link rel="stylesheet" href="../assets/css/vue.css">
    <script src="../assets/js/vue.js"></script>
    <script src="../assets/js/jquery.js"></script>
</head>
<body>
<div id="apps">
    <a href="../index.html" class="retu">BACK</a>
    <h1>内置组件slot</h1>
    <jspang>
        <span slot="blogUrl">{{ jspangData.blogUrl }}</span>
        <span slot="netName">{{ jspangData.netName }}</span>
        <span slot="skill">{{ jspangData.skill }}</span>
    </jspang>
</div>

<template id="tmp">
    <div>
        <p>博客地址：<slot name="blogUrl"></slot></p>
        <p>网名：<slot name="netName"></slot></p>
        <p>技术类型：<slot name="skill"></slot></p>
    </div>
</template>
<script type="text/javascript">
    //模板
    var jspang = {
        template:'#tmp'
    }
    var app = new Vue({
        el : '#apps',
        data : {
            jspangData : {
                blogUrl : 'http://jspang.com',
                netName : '技术胖',
                skill : 'web前端'
            }
        },
        components:{
            'jspang' : jspang
        }
    });
</script>
</body>
</html>